

<!-- 分销商 -->
<template>
	<view class="container">
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="分销商申请" colorTheme="black">
			</navHeader>
		</view>
		
		
		<!-- 申请类型 -->
		<view class="applyType-Container">
			<view @click="changeApplyType(1)" class="applyType borderOneRpx" :class="{currentType1: applyType == 1}">
				个人
			</view>
			<view @click="changeApplyType(2)" class="applyType borderOneRpx" :class="{currentType2: applyType == 2}">
				企业
			</view>
		</view>
		
		
		<!-- 申请信息 -->
		<view class="applyInfo-Container">
			<view class="oneRow">
				<view v-if="applyType == 1" class="columnLabel">
					<text class="mustIcon">*</text>
					姓名
				</view>
				<view v-if="applyType == 2" class="columnLabel">
					<text class="mustIcon">*</text>
					联系人
				</view>
				<view class="columnValue">
					<input type="text" v-model="name" placeholder-class="inputHolder" placeholder="请填写申请人姓名"/>
				</view>
			</view>
			<view class="splitLine borderOneRpx">
			</view>
			<view class="oneRow">
				<view class="columnLabel">
					<text class="mustIcon">*</text>
					电话
				</view>
				<view class="columnValue">
					<input type="text" v-model="phone" placeholder-class="inputHolder" placeholder="请填写电话"/>
				</view>
			</view>
			<view class="splitLine borderOneRpx">
			</view>
			<view class="oneRow">
				<view class="columnLabel">
					<text class="mustIcon">*</text>
					地址
				</view>
				<view class="columnValue">
					<input type="text" v-model="address" placeholder-class="inputHolder" placeholder="请填写地址"/>
				</view>
			</view>
			<view class="splitLine borderOneRpx">
			</view>
			
			
			<!-- 个人信息 -->
			<view v-if="applyType == 1">
				<view class="oneRow">
					<view class="columnLabel">
						<text class="mustIcon">*</text>
						身份证照片
					</view>
				</view>
				<view class="idCard-Container">
					<image @click="selectImg('idCardFront')" class="idCard" :src="idCardFront == ''? icon.idCardFront : (imgSite + idCardFront)"></image>
					<image @click="selectImg('idCardReverse')" class="idCard" :src="idCardReverse == ''? icon.idCardReverse : (imgSite + idCardReverse)"></image>
				</view>
				<view class="splitLine borderOneRpx">
				</view>
			</view>
			
			<!-- 企业信息 -->
			<view v-if="applyType == 2">
				<view class="oneRow">
					<view class="columnLabel">
						<text class="mustIcon">*</text>
						公司名称
					</view>
					<view class="columnValue">
						<input type="text" v-model="company" placeholder-class="inputHolder" placeholder="请填写公司名称"/>
					</view>
				</view>
				<view class="splitLine borderOneRpx">
				</view>
				<view class="oneRow">
					<view class="columnLabel">
						<text class="mustIcon">*</text>
						统一社会信用代码
					</view>
					<view class="columnValue">
						<input type="text" v-model="creditCode" placeholder-class="inputHolder" placeholder="请填写社会信用代码"/>
					</view>
				</view>
				<view class="splitLine borderOneRpx">
				</view>
				
				<view class="oneRow">
					<view class="columnLabel">
						<text class="mustIcon">*</text>
						营业执照照片
					</view>
				</view>
				<view class="enterprise-Container">
					<image @click="selectImg('businessLicense')" class="enterprise" :src="businessLicense == ''? icon.businessLicense : (imgSite + businessLicense)"></image>
				</view>
				<view class="splitLine borderOneRpx">
				</view>
				
				<view class="oneRow">
					<view class="columnLabel">
						<text class="mustIcon">*</text>
						加盖公章授权书
					</view>
				</view>
				<view class="enterprise-Container">
					<image @click="selectImg('sealAuthority')" class="enterprise" :src="sealAuthority == ''? icon.sealAuthority : (imgSite + sealAuthority)"></image>
				</view>
				<view class="splitLine borderOneRpx">
				</view>
			</view>

			
			<!-- 备注 -->
			<view class="oneRow">
				<view class="columnLabel">
					备注
				</view>
			</view>
			<view class="remarks-Container">
				<textarea v-model="remarks" placeholder-class="inputHolder" placeholder="请在此输入您的备注..." />
			</view>
		</view>
		
		
		<!-- 提交申请 -->
		<view @click="submitApplyHandler" class="submit-btn">
			提交申请
		</view>
	</view>
</template>

<script>
	import {
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		components: {
			navHeader
		},
		data() {
			return {
				icon: {
					idCardFront: "/static/images/user/distributor/idCardFront.png",
					idCardReverse: "/static/images/user/distributor/idCardReverse.png",
					businessLicense: "/static/images/user/distributor/businessLicense.png",
					sealAuthority: "/static/images/user/distributor/sealAuthority.png",
				},
				
				applyType: 1,
				name: "",
				phone: "",
				address: "",
				idCardFront: "",
				idCardReverse: "",
				
				company: "",
				creditCode: "",
				businessLicense: "",
				sealAuthority: "",
				remarks: ""
			}
		},
		computed:{
			...mapState(['hasLogin', 'imgSite', 'apiSite']),
		},
		onLoad(options) {
		},
		methods: {
			
			//申请类型
			changeApplyType(type) {
				this.applyType = type;
				
				this.name = "";
				this.phone = "";
				this.address = "";
				this.idCardFront = "";
				this.idCardReverse = "";
				
				this.company = "";
				this.creditCode = "";
				this.businessLicense = "";
				this.sealAuthority = "";
				this.remarks = "";
			},
			
			
			// 选择图片
			selectImg(imgName) {
				
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: chooseImageRes => {
						let tempFilePaths = chooseImageRes.tempFilePaths;
						// #ifdef APP-PLUS
						uni.uploadFile({
							url: that.apiSite + '/u_avt',
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								that[imgName] = JSON.parse(uploadFileRes.data).response[0];
							},
							fail: (res) => {
								console.log(res);
							}
						});
						// #endif
						// #ifndef APP-PLUS
						that.$api.globalUtil.imgAjax({
							url: '/u_avt',
							method: 'POST',
							filePath: tempFilePaths[0],
							name: 'file',
							data: {},
							success: function(res2) {
								that[imgName] = res2.response[0];
							}
						});
						// #endif
					}
				});
			},
			
			
			//提交申请
			submitApplyHandler() {
				
				//必填校验
				if(!this.name) {
					this.$api.msg("请填写申请人姓名");
					return ;
				}
				if(!this.phone) {
					this.$api.msg("请填写电话");
					return ;
				}
				if(!this.address) {
					this.$api.msg("请填写地址");
					return ;
				}
				
				
				var that = this;
				var data = {
					distributorType: that.applyType,
					name: that.name,
					phone: that.phone,
					address: that.address,
					remarks: that.remarks
				};
				
				if(that.applyType == 1) {
					
					if(!that.idCardFront) {
						this.$api.msg("请上传身份证人像面照片");
						return ;
					}
					if(!that.idCardReverse) {
						this.$api.msg("请上传身份证国徽面照片");
						return ;
					}
					
					data['idCardFront'] = that.idCardFront;
					data['idCardReverse'] = that.idCardReverse;
				}else if(that.applyType == 2) {
					
					if(!this.company) {
						this.$api.msg("请填写公司名称");
						return ;
					}
					if(!this.creditCode) {
						this.$api.msg("请填写社会信用代码");
						return ;
					}
					if(!that.businessLicense) {
						this.$api.msg("请上传营业执照照片");
						return ;
					}
					if(!that.sealAuthority) {
						this.$api.msg("请上传加盖公章授权书");
						return ;
					}
					
					data['company'] = that.company;
					data['creditCode'] = that.creditCode;
					data['businessLicense'] = that.businessLicense;
					data['sealAuthority'] = that.sealAuthority;
				}
				
				
				that.$api.globalUtil.requestAjax({
					url: '/distributorApi/saveApi',
					method: 'POST',
					data: data,
					success: function(res) {
						that.$api.msg("申请成功");
						setTimeout(function() {
							uni.navigateBack({
							});
						}, 2000);
					}
				});
			}
		}
	}
</script>

<style lang="less">
	page{
		background: #F5F5F5;
	}
	
	.container {
		padding-bottom: 100rpx;
	}
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	
	//申请类型
	.applyType-Container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin: 0 auto;
		margin-top: 30rpx;
		width:540rpx;
		height:70rpx;
		line-height: 70rpx;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		
		.applyType {
			z-index: 9;
			width: 50%;
			height: 100%;
			text-align: center;
			font-size:30rpx;
			font-family:PingFang SC;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			
			&:first-of-type.borderOneRpx:after {
				border-color: #D21728;
				border-radius: 20rpx 0 0 20rpx;
			}
			&:last-of-type.borderOneRpx:after {
				border-color: #D21728;
				border-radius: 0 20rpx 20rpx 0;
			}
			
			&.currentType1 {
				color: #FFFFFF;
				background-color: #D21728;
				border-radius: 10rpx 0 0 10rpx;
			}
			
			&.currentType2 {
				color: #FFFFFF;
				background-color: #D21728;
				border-radius: 0px 10rpx  10rpx 0;
			}
		}
	}
	
	
	//申请信息
	.inputHolder {
		font-size: 26rpx;
		color: #BFBFBF;
	}
	.applyInfo-Container {
		margin: 0 auto;
		margin-top: 30rpx;
		padding-bottom: 50rpx;
		width: 100%;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		
		//一行样式
		.oneRow {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 690rpx;
			height: 96rpx;
			
			.mustIcon {
				color: #E01327;
			}
			
			.columnLabel {
				font-size:26rpx;
				font-family:PingFang SC;
				color: #666666;
			}
			.columnValue {
				width: 400rpx;
				text-align: right;
				font-size:26rpx;
				font-family:PingFang SC;
				color: #333333;
				
				input {
					font-size:26rpx;
				}
			}
		}
		
		//分割线
		.splitLine {
			position: relative;
			margin: 0 auto;
			width: 690rpx;
		}
		.splitLine.borderOneRpx:after {
			border-top: 0;
			border-left: 0;
			border-right: 0;
			border-color: #EDEDED;
		}
	}
	
	
	//身份证信息
	.idCard-Container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: -10rpx;
		margin-bottom: 36rpx;
		width: 690rpx;
		
		.idCard {
			width: 336rpx;
			height: 214rpx;
		}
	}
	
	
	//企业信息
	.enterprise-Container {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: -10rpx;
		margin-bottom: 36rpx;
		width: 690rpx;
		
		.enterprise {
			width: 218rpx;
			height: 264rpx;
		}
	}
	
	
	//备注
	.remarks-Container {
		margin: 0 auto;
		margin-top: -10rpx;
		padding: 36rpx;
		width:690rpx;
		height:236rpx;
		background:rgba(247,247,247,1);
		border-radius:10rpx;
		
		textarea {
			width: 100%;
			height: 100%;
			font-size: 26rpx;
		}
	}

	
	//提交申请
	.submit-btn{
		justify-content: center;
		margin: 0 auto;
		margin-top: 105rpx;
		width:600rpx;
		height:90rpx;
		line-height: 90rpx;
		background:#FE5E49;
		border-radius:45rpx;
		text-align: center;
		font-size:34rpx;
		font-family:PingFang;
		color:rgba(255,255,255,1);
	}
</style>



